<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="web_display.src.js"></script>
</head>

<body>
    <canvas id="mycanvas" width="1280" height="768"></canvas>
    <script>
        let image = new Image();
        image.src = "1.jpg";
        image.onload = function () {
            let canvas = document.getElementById("mycanvas");
            let display = new Display(canvas, true);
            display.disableDisplay();
            display.addRect2Display(200, 200, -10, 100, 100, "#ff000080");
            display.addEllipseDisplay(300, 300, -85, 200, 100, "#00ff0080");
            display.addRect1Display(500, 500, 400, 400, "#00ff0080");
            display.addLineDisplay(0, 500, 800, 200, "#0000ff80");
            display.addHLineDisplay(300, "#00ff0080");
            display.addVLineDisplay(300, "#00ffff80");
            display.addCircleDisplay(50, 500, 50, "#ffff0080");
            display.addEllipseRingDisplay(100, 130, -20, 100, 100, 0, 250, 20, "#00ffff80");
            display.addCircleRingDisplay(540, 330, 150, 0, 360, 20, "#ff00ff80");
            display.addStringDisplay(150, 150, "#ffff00ff", "用于显示", 40, "微软雅黑");
            display.addRegionDisplay([new Point(20, 20), new Point(400, 0), new Point(200, 500)], [
                [new Point(150, 300), new Point(300, 150), new Point(200, 400)]
            ], "#0000ff80");
            display.setDisplayImage(image);
            display.enableDisplay();
            display.render();
        }
    </script>
</body>

</html>